<template>
  <div id="app">
    <h1 class="title">福洞村新冠疫苗接种报名登记</h1>
    <div class="desc">请本村户籍18周岁以上需要接种新冠疫苗的村民进行报名登记。非本村户籍居住在本村的外来人员请到福洞村一楼报名登记。接种时间请关注各“经纪社微信群”或“福洞村疫苗接种登记群”通知。联系电话：82876404</div>
    <div class="form">
      <div class="form-item">
        <div class="form-item-label">姓名 <span>*</span></div>
        <md-input-item
          v-model="form.name"
          placeholder="请输入"
        ></md-input-item>
      </div>
      <div class="form-item">
        <div class="form-item-label">身份证号码 <span>*</span></div>
        <md-input-item
          v-model="form.idcard"
          placeholder="请输入"
        ></md-input-item>
      </div>
      <div class="form-item">
        <div class="form-item-label">现居住地址 <span>*</span></div>
        <md-input-item
          v-model="form.address"
          placeholder="请输入"
        ></md-input-item>
      </div>
      <div class="form-item">
        <div class="form-item-label">手机号码 <span>*</span></div>
        <md-input-item
          v-model="form.mobile"
          placeholder="请输入"
        ></md-input-item>
      </div>
      <div class="form-item">
        <div class="form-item-label">现在需要接种第几针 <span>*</span></div>
        <div class="radio-box">
          <md-radio name="1" v-model="form.checked1" label="第一针" />
          <md-radio name="2" v-model="form.checked1" label="第二针" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">如已接种第一针，请填写到期接种第二针时间</div>
        <md-input-item
          v-model="form.overDate"
          placeholder="请选择"
          readonly
          @click.native="isDatePickerShow = true"
        >
        <md-icon
          slot="right"
          name="calendar"
          size="lg"
        ></md-icon>
        </md-input-item>
      </div>
      <div class="form-item">
        <div class="form-item-label">是否持有健康码“绿码”？ <span>*</span></div>
        <div class="radio-box">
          <md-radio name="0" v-model="form.checked2" label="是" />
          <md-radio name="1" v-model="form.checked2" label="否" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">备注</div>
        <md-input-item
          v-model="form.note"
          placeholder="请输入"
        ></md-input-item>
      </div>
      <div class="form-submit" @click="submit">提交</div>
    </div>
    <md-date-picker
      v-model="isDatePickerShow"
      ref="datePicker"
      today-text="今天"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="currentDate"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
  </div>
</template>

<script>
import { InputItem, Radio, DatePicker, Icon, Toast } from 'mand-mobile'
import axios from 'axios'

export default {
  name: 'App',
  components: {
    [InputItem.name]: InputItem,
    [Radio.name]: Radio,
    [DatePicker.name]: DatePicker,
    [Icon.name]: Icon
  },
  data() {
    return {
      form: {
        name: '',
        idcard: '',
        address: '',
        mobile: '',
        checked1: '',
        overDate: '',
        checked2: '',
        note: ''
      },
      url: '',
      isDatePickerShow: false,
      minDate: new Date('2013/1/1'),
      maxDate: new Date('2099/12/30'),
      currentDate: new Date()
    }
  },
  methods: {
    onDatePickerConfirm() {
      this.form.overDate = this.$refs.datePicker.getFormatDate('yyyy/MM/dd')
    },
    formValidate () {
      let flag = false
      const { name, idcard, address, mobile, checked1, checked2 } = this.form
      if (name && idcard && address && mobile && checked1 && checked2) {
        flag = true
      }
      return flag
    },
    submit() {
      if (this.formValidate()) {
        // url为后端接口地址，form为表单数据，字段可更改，Content-Type: application/json
        axios.post(this.url, this.form).then(res => {
          console.log(res) // 响应结果
          if(res.success) {
            Toast.info('提交成功！')
          }
        }).catch(err => {
          console.log(err) // 异常报错
        })
      } else {
        Toast.info('请完善信息！')
      }
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 10px;
  .title {
    font-size: 43px;
  }
  .desc {
    font-size: 30px;
  }
  .form {
    padding: 10px;
    &-item {
      margin: 40px 20px;
      &-label {
        font-size: 32px;
        span {
          color: red;
        }
      }
      .md-field-item {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 0 20px;
        margin-top: 10px;
      }
      .radio-box {
        font-size: 28px;
        .md-radio {
          margin: 30px 0;
        }
      }
    }
    &-submit {
      height: 90px;
      line-height: 90px;
      background: #fe9103;
      border-radius: 10px;
      margin: 60px 0;
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>
